<template>
  <div class="__form">
    <div class="flex-start m-b-30">
      <el-button icon="el-icon-back" type="primary" plain round size="small" @click="back">返回</el-button>
    </div>
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="170px">
      <el-form-item label="加注机编号">
        <el-input disabled size="large" v-model="info.macCode"/>
      </el-form-item>
      <el-form-item label="加注站名称">
        <el-input disabled size="large" v-model="info.siteName"/>
      </el-form-item>
      <el-form-item label="所属集群">
        <el-input disabled size="large" v-model="info.clusterName"/>
      </el-form-item>
      <el-form-item label="短信通知" prop="smsPhone">
        <el-input size="large" placeholder="输入手机号码" v-model="form.smsPhone"/>
      </el-form-item>
      <el-form-item label="预警阈值（%）" prop="warnValue">
        <el-input-number class="w-100" min="0" v-model="form.warnValue" size="large"/>
      </el-form-item>
      <el-form-item label="报警阈值（%）" prop="alarmValue">
        <el-input-number class="w-100" min="0" v-model="form.alarmValue" size="large"/>
      </el-form-item>
      <el-form-item class="m-t-30">
        <el-button @click="cancel" icon="el-icon-close">取消</el-button>
        <el-button type="primary" @click="save" :loading="saveLoading" icon="el-icon-check">保存</el-button>
      </el-form-item>
    </el-form>
    <div class="h-100px"></div>
  </div>
</template>

<script>
import {msgError, msgSuccess} from "@/util/common-util";
import {saveOrUpdate} from "@/api/business/filling-machine";
import {isMobile} from "@/util/validate";

export default {
  name: "margin-set-content",
  props: ['info'],
  data() {
    return {
      saveLoading: false,
      form: {
        id: '',
        smsPhone: '',
        warnValue: 0,
        alarmValue: 0,
        isPropertySetting: true
      },
      rules: {
        totalCapacity: [{required: true, message: '请填写总容量', trigger: 'blur'}],
        totalHeight: [{required: true, message: '请填写总高度', trigger: 'blur'}],
        smsPhone: [{required: true, message: '请填写电话', trigger: 'blur'}],
        warnValue: [{required: true, message: '请填写预警阈值', trigger: 'blur'}],
        alarmValue: [{required: true, message: '请填写报警阈值', trigger: 'blur'}],
      }
    }
  },
  created() {
    this.form.smsPhone = this.info.smsPhone
    this.form.warnValue = this.info.warnValue
    this.form.alarmValue = this.info.alarmValue
  },
  methods: {
    back(flag) {
      this.$emit('back', flag)
    },
    cancel() {
      this.back()
    },
    save() {
      if(!isMobile(this.form.smsPhone)) return msgError("手机号码格式不正确")
      this.form.id = this.info.id
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.saveLoading = true
          saveOrUpdate(this.form).then(res => {
            msgSuccess()
            this.back(true)
            this.saveLoading = false
          }).catch(() => {
            this.saveLoading = false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.__form {
  width: 38%;
}
</style>
